<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产后关怀专区 - 中医智能诊断系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4A5568',
                        secondary: '#718096'
                    },
                    borderRadius: {
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <div class="w-[1440px] mx-auto p-6">
        <!-- 导航栏 -->
        <nav class="bg-white p-4 mb-6 shadow-md rounded-lg">
            <div class="flex justify-between items-center">
                <a href="index.html" class="text-2xl font-bold">中医智能诊断系统</a>
                <div class="flex gap-4">
                    <a href="舌诊AI分析.html" class="text-gray-600">舌诊AI分析</a>
                    <a href="体质评分系统.html" class="text-gray-600">体质评分系统</a>
                    <a href="健康数据监测.html" class="text-gray-600">健康数据监测</a>
                    <a href="产后关怀专区.html" class="text-primary font-bold">产后关怀专区</a>
                    <a href="个人中心.html" class="text-gray-600">个人中心</a>
                    <a href="会员订阅.html" class="text-gray-600">会员订阅</a>
                </div>
            </div>
        </nav>
        
        <!-- 产后关怀专区模块 -->
        <div class="bg-white p-6 rounded-lg shadow-lg mb-8">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold">产后关怀专区</h2>
                <div class="flex gap-4">
                    <button id="course-btn" class="px-4 py-2 bg-primary text-white rounded-lg !rounded-button">
                        <i class="fas fa-video mr-2"></i>课程
                    </button>
                    <button id="massage-btn" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg !rounded-button">
                        <i class="fas fa-hands mr-2"></i>穴位按摩
                    </button>
                    <button id="nutrition-btn" class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg !rounded-button">
                        <i class="fas fa-apple-alt mr-2"></i>营养指导
                    </button>
                </div>
            </div>
            
            <!-- 课程内容 -->
            <div id="course-content" class="content-section">
                <div class="mb-6">
                    <h3 class="text-xl font-bold mb-4">推荐课程</h3>
                    <div class="grid grid-cols-3 gap-6">
                        <div class="video-card" data-video="course1">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/b7c9fecde59282ce9fe9501722c6e2c6.jpg" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-4xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2">产后心理调适</h4>
                            <div class="flex items-center justify-between text-sm text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>45分钟</span>
                                <span><i class="fas fa-star mr-1"></i>4.8 (126)</span>
                            </div>
                        </div>
                        <div class="video-card" data-video="course2">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/08ddb5748dee378e0018515a23fae9c9.jpg" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-4xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2">母婴互动技巧</h4>
                            <div class="flex items-center justify-between text-sm text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>30分钟</span>
                                <span><i class="fas fa-star mr-1"></i>4.9 (98)</span>
                            </div>
                        </div>
                        <div class="video-card" data-video="course3">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-48 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-4xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2">产后恢复瑜伽</h4>
                            <div class="flex items-center justify-between text-sm text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>35分钟</span>
                                <span><i class="fas fa-star mr-1"></i>4.7 (112)</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4">热门课程</h3>
                    <div class="grid grid-cols-4 gap-4">
                        <div class="video-card" data-video="course4">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/b7c9fecde59282ce9fe9501722c6e2c6.jpg" class="w-full h-36 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-3xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2 text-sm">产后饮食指南</h4>
                            <div class="text-xs text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>25分钟</span>
                            </div>
                        </div>
                        <div class="video-card" data-video="course5">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/08ddb5748dee378e0018515a23fae9c9.jpg" class="w-full h-36 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-3xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2 text-sm">哺乳期注意事项</h4>
                            <div class="text-xs text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>28分钟</span>
                            </div>
                        </div>
                        <div class="video-card" data-video="course6">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-36 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-3xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2 text-sm">婴儿抚触按摩</h4>
                            <div class="text-xs text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>22分钟</span>
                            </div>
                        </div>
                        <div class="video-card" data-video="course7">
                            <div class="relative">
                                <img src="https://ai-public.mastergo.com/ai/img_res/b7c9fecde59282ce9fe9501722c6e2c6.jpg" class="w-full h-36 object-cover rounded-lg">
                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center rounded-lg">
                                    <i class="fas fa-play-circle text-white text-3xl"></i>
                                </div>
                            </div>
                            <h4 class="font-medium mt-2 text-sm">产后家庭关系调整</h4>
                            <div class="text-xs text-gray-600">
                                <span><i class="fas fa-clock mr-1"></i>32分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 穴位按摩内容 -->
            <div id="massage-content" class="content-section hidden">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-bold mb-4">穴位按摩指导</h3>
                        <div class="bg-gray-50 p-4 rounded-lg mb-4">
                            <p class="text-gray-600 mb-4">产后穴位按摩可以帮助恢复体力、促进气血循环、缓解不适症状。请点击穴位了解详细的按摩方法。</p>
                            <div class="relative h-[400px] bg-gray-200 rounded-lg">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-full object-cover rounded-lg">
                                
                                <!-- 穴位标记点 -->
                                <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <button class="acupoint-marker" data-acupoint="足三里">
                                        <span class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center cursor-pointer hover:bg-opacity-80">1</span>
                                    </button>
                                </div>
                                
                                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                                    <button class="acupoint-marker" data-acupoint="三阴交">
                                        <span class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center cursor-pointer hover:bg-opacity-80">2</span>
                                    </button>
                                </div>
                                
                                <div class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 translate-y-1/2">
                                    <button class="acupoint-marker" data-acupoint="关元穴">
                                        <span class="w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center cursor-pointer hover:bg-opacity-80">3</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="acupoint-details" class="bg-gray-50 p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-4">穴位详情</h3>
                        <div id="default-acupoint-content">
                            <p class="text-gray-600">请点击左侧人体图上的穴位标记点，查看详细的按摩方法和功效。</p>
                            <div class="mt-6 p-4 bg-gray-100 rounded-lg">
                                <h4 class="font-medium mb-2">穴位按摩注意事项</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li><i class="fas fa-circle text-primary text-xs mr-2"></i>按摩前应保持手部清洁</li>
                                    <li><i class="fas fa-circle text-primary text-xs mr-2"></i>力度适中，以不引起疼痛为宜</li>
                                    <li><i class="fas fa-circle text-primary text-xs mr-2"></i>每个穴位按摩1-2分钟</li>
                                    <li><i class="fas fa-circle text-primary text-xs mr-2"></i>每日可进行2-3次按摩</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div id="足三里-content" class="acupoint-content hidden">
                            <div class="flex items-center mb-4">
                                <h4 class="text-lg font-bold">足三里穴位</h4>
                                <span class="ml-2 px-2 py-1 bg-primary text-white text-xs rounded-full">1号穴位</span>
                            </div>
                            <div class="mb-4">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-48 object-cover rounded-lg">
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <h5 class="font-medium mb-1">位置</h5>
                                    <p class="text-gray-600">外膝眼下3寸，胫骨外侧约一横指处。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">按摩方法</h5>
                                    <p class="text-gray-600">用拇指指腹按在穴位上，以中等力度按压并做顺时针方向揉动，每次按摩1-2分钟。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">功效</h5>
                                    <p class="text-gray-600">强健脾胃，促进产后恢复，增强体质，缓解疲劳。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">适用情况</h5>
                                    <p class="text-gray-600">产后体虚乏力，食欲不振，腹部胀满。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div id="三阴交-content" class="acupoint-content hidden">
                            <div class="flex items-center mb-4">
                                <h4 class="text-lg font-bold">三阴交穴位</h4>
                                <span class="ml-2 px-2 py-1 bg-primary text-white text-xs rounded-full">2号穴位</span>
                            </div>
                            <div class="mb-4">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-48 object-cover rounded-lg">
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <h5 class="font-medium mb-1">位置</h5>
                                    <p class="text-gray-600">内踝尖上3寸，胫骨内侧后缘。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">按摩方法</h5>
                                    <p class="text-gray-600">用拇指指腹轻轻按压，然后向下推动，每次按摩1-2分钟。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">功效</h5>
                                    <p class="text-gray-600">调理气血，促进乳汁分泌，改善睡眠，缓解产后焦虑。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">适用情况</h5>
                                    <p class="text-gray-600">产后乳汁不足，失眠，情绪不稳。</p>
                                </div>
                            </div>
                        </div>
                        
                        <div id="关元穴-content" class="acupoint-content hidden">
                            <div class="flex items-center mb-4">
                                <h4 class="text-lg font-bold">关元穴位</h4>
                                <span class="ml-2 px-2 py-1 bg-primary text-white text-xs rounded-full">3号穴位</span>
                            </div>
                            <div class="mb-4">
                                <img src="https://ai-public.mastergo.com/ai/img_res/c8556308893531a7fa65843422f5746f.jpg" class="w-full h-48 object-cover rounded-lg">
                            </div>
                            <div class="space-y-4">
                                <div>
                                    <h5 class="font-medium mb-1">位置</h5>
                                    <p class="text-gray-600">前正中线上，脐下3寸。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">按摩方法</h5>
                                    <p class="text-gray-600">用掌心轻轻按在穴位上，顺时针方向揉动30次，然后逆时针揉动30次。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">功效</h5>
                                    <p class="text-gray-600">补肾培元，增强体力，促进子宫恢复，调理月经。</p>
                                </div>
                                <div>
                                    <h5 class="font-medium mb-1">适用情况</h5>
                                    <p class="text-gray-600">产后体力恢复慢，腰膝酸软，小腹冷痛。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8">
                    <h3 class="text-xl font-bold mb-4">每日按摩计划</h3>
                    <div class="bg-gray-50 p-4 rounded-lg">
                        <div class="grid grid-cols-3 gap-6">
                            <div class="p-4 bg-white rounded-lg">
                                <h4 class="font-medium mb-3">产后1-2周</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>关元穴 - 每天2次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>足三里 - 每天2次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>三阴交 - 每天1次</li>
                                </ul>
                            </div>
                            <div class="p-4 bg-white rounded-lg">
                                <h4 class="font-medium mb-3">产后3-4周</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>关元穴 - 每天1次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>足三里 - 每天2次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>三阴交 - 每天2次</li>
                                </ul>
                            </div>
                            <div class="p-4 bg-white rounded-lg">
                                <h4 class="font-medium mb-3">产后1-3个月</h4>
                                <ul class="space-y-2 text-gray-600">
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>关元穴 - 每天1次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>足三里 - 每天1次</li>
                                    <li><i class="fas fa-check-circle text-primary mr-2"></i>三阴交 - 每天1次</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 营养指导内容 -->
            <div id="nutrition-content" class="content-section hidden">
                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <h3 class="text-xl font-bold mb-4">产后营养食谱</h3>
                        <div class="space-y-4">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="flex items-start">
                                    <img src="https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg" class="w-24 h-24 object-cover rounded-lg mr-4">
                                    <div>
                                        <h4 class="font-medium mb-1">花生红枣猪蹄汤</h4>
                                        <p class="text-sm text-gray-600 mb-2">促进乳汁分泌，补充蛋白质和胶原蛋白</p>
                                        <button class="text-primary text-sm recipe-btn" data-recipe="recipe1">查看食谱</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="flex items-start">
                                    <img src="https://ai-public.mastergo.com/ai/img_res/9b562a7d18bc78a17f654cc247600413.jpg" class="w-24 h-24 object-cover rounded-lg mr-4">
                                    <div>
                                        <h4 class="font-medium mb-1">当归鲫鱼汤</h4>
                                        <p class="text-sm text-gray-600 mb-2">补血养气，促进产后恢复</p>
                                        <button class="text-primary text-sm recipe-btn" data-recipe="recipe2">查看食谱</button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <div class="flex items-start">
                                    <img src="https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg" class="w-24 h-24 object-cover rounded-lg mr-4">
                                    <div>
                                        <h4 class="font-medium mb-1">黄芪枸杞子鸡汤</h4>
                                        <p class="text-sm text-gray-600 mb-2">增强体质，改善体虚乏力</p>
                                        <button class="text-primary text-sm recipe-btn" data-recipe="recipe3">查看食谱</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-bold mb-4">营养阶段指导</h3>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex mb-4">
                                <button class="flex-1 py-2 bg-primary text-white rounded-tl-lg rounded-bl-lg stage-btn" data-stage="stage1">产褥期</button>
                                <button class="flex-1 py-2 bg-gray-200 text-gray-600 stage-btn" data-stage="stage2">哺乳期</button>
                                <button class="flex-1 py-2 bg-gray-200 text-gray-600 rounded-tr-lg rounded-br-lg stage-btn" data-stage="stage3">恢复期</button>
                            </div>
                            
                            <div id="stage1-content" class="stage-content">
                                <p class="text-gray-600 mb-4">产褥期（产后1-6周）是身体恢复的关键时期，合理饮食有助于伤口愈合和乳汁分泌。</p>
                                <div class="space-y-3">
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">推荐食物</h5>
                                        <p class="text-sm text-gray-600">红枣、黄芪、当归、猪蹄、鲫鱼、鸡肉、蛋类、豆制品、燕麦</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">少食食物</h5>
                                        <p class="text-sm text-gray-600">生冷食物、辛辣刺激食物、油腻食物、咖啡、酒类</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">饮食原则</h5>
                                        <ul class="text-sm text-gray-600 space-y-1">
                                            <li>• 少量多餐，易消化</li>
                                            <li>• 保证充足蛋白质</li>
                                            <li>• 适当补充铁质</li>
                                            <li>• 每日饮水2000ml以上</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="stage2-content" class="stage-content hidden">
                                <p class="text-gray-600 mb-4">哺乳期（产后6周-1年）需要保证营养充足，促进乳汁分泌，并注意避免影响乳汁质量的食物。</p>
                                <div class="space-y-3">
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">推荐食物</h5>
                                        <p class="text-sm text-gray-600">花生、通草、猪蹄、鲫鱼、奶类、杂粮、新鲜蔬果、坚果</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">少食食物</h5>
                                        <p class="text-sm text-gray-600">葱姜蒜等刺激性食物、巧克力、酒类、浓茶咖啡</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">饮食原则</h5>
                                        <ul class="text-sm text-gray-600 space-y-1">
                                            <li>• 增加热量摄入</li>
                                            <li>• 保证蛋白质和钙质</li>
                                            <li>• 多吃富含维生素的食物</li>
                                            <li>• 每日饮水2500ml以上</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="stage3-content" class="stage-content hidden">
                                <p class="text-gray-600 mb-4">恢复期（产后3个月以后）可以逐渐调整饮食结构，注重体重管理和身体机能恢复。</p>
                                <div class="space-y-3">
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">推荐食物</h5>
                                        <p class="text-sm text-gray-600">全谷类、瘦肉、鱼类、豆制品、新鲜蔬果、低脂奶制品</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">少食食物</h5>
                                        <p class="text-sm text-gray-600">高糖食品、精制碳水化合物、高脂肪食物</p>
                                    </div>
                                    <div class="p-3 bg-white rounded-lg">
                                        <h5 class="font-medium mb-1">饮食原则</h5>
                                        <ul class="text-sm text-gray-600 space-y-1">
                                            <li>• 控制总热量</li>
                                            <li>• 均衡营养</li>
                                            <li>• 少油少盐</li>
                                            <li>• 规律进餐</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 视频播放弹窗 -->
    <div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg w-full max-w-4xl">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 id="video-title" class="text-xl font-bold">视频课程</h3>
                <button id="close-video" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-4">
                <div class="aspect-video bg-black mb-4">
                    <video id="video-player" class="w-full h-full" controls>
                        <source src="" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                </div>
                <div id="video-description" class="text-gray-600"></div>
            </div>
        </div>
    </div>

    <!-- 食谱详情弹窗 -->
    <div id="recipe-modal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="p-4 border-b flex justify-between items-center">
                <h3 id="recipe-title" class="text-xl font-bold">食谱详情</h3>
                <button id="close-recipe" class="text-gray-600 hover:text-gray-900">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div id="recipe-content" class="p-6"></div>
        </div>
    </div>

    <script>
        // 内容切换
        document.getElementById('course-btn').addEventListener('click', function() {
            toggleContent('course-content');
            toggleButton(this);
        });
        
        document.getElementById('massage-btn').addEventListener('click', function() {
            toggleContent('massage-content');
            toggleButton(this);
        });
        
        document.getElementById('nutrition-btn').addEventListener('click', function() {
            toggleContent('nutrition-content');
            toggleButton(this);
        });
        
        function toggleContent(contentId) {
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.add('hidden');
            });
            document.getElementById(contentId).classList.remove('hidden');
        }
        
        function toggleButton(button) {
            document.querySelectorAll('#course-btn, #massage-btn, #nutrition-btn').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('bg-gray-100', 'text-gray-600');
            });
            button.classList.remove('bg-gray-100', 'text-gray-600');
            button.classList.add('bg-primary', 'text-white');
        }
        
        // 穴位点击交互
        document.querySelectorAll('.acupoint-marker').forEach(marker => {
            marker.addEventListener('click', function() {
                const acupointId = this.getAttribute('data-acupoint');
                showAcupointDetail(acupointId);
            });
        });
        
        function showAcupointDetail(acupointId) {
            document.querySelectorAll('.acupoint-content').forEach(content => {
                content.classList.add('hidden');
            });
            document.getElementById('default-acupoint-content').classList.add('hidden');
            document.getElementById(`${acupointId}-content`).classList.remove('hidden');
        }
        
        // 营养阶段切换
        document.querySelectorAll('.stage-btn').forEach(button => {
            button.addEventListener('click', function() {
                const stageId = this.getAttribute('data-stage');
                
                document.querySelectorAll('.stage-btn').forEach(btn => {
                    btn.classList.remove('bg-primary', 'text-white');
                    btn.classList.add('bg-gray-200', 'text-gray-600');
                });
                this.classList.remove('bg-gray-200', 'text-gray-600');
                this.classList.add('bg-primary', 'text-white');
                
                document.querySelectorAll('.stage-content').forEach(content => {
                    content.classList.add('hidden');
                });
                document.getElementById(`${stageId}-content`).classList.remove('hidden');
            });
        });
        
        // 视频卡片点击
        document.querySelectorAll('.video-card').forEach(card => {
            card.addEventListener('click', function() {
                const videoId = this.getAttribute('data-video');
                playVideo(videoId);
            });
        });
        
        function playVideo(videoId) {
            const modal = document.getElementById('video-modal');
            const player = document.getElementById('video-player');
            const title = document.getElementById('video-title');
            const description = document.getElementById('video-description');
            
            // 视频数据（实际应用中应从服务器获取）
            const videos = {
                course1: {
                    title: '产后心理调适',
                    source: 'https://example.com/videos/course1.mp4', // 实际视频URL
                    description: '本课程将帮助新妈妈了解产后情绪变化的正常现象，学习有效的心理调适方法，建立健康的心态面对新生活。'
                },
                course2: {
                    title: '母婴互动技巧',
                    source: 'https://example.com/videos/course2.mp4',
                    description: '通过科学的互动方式，增进母婴情感联结，促进宝宝健康发展，同时提升妈妈的育儿信心。'
                },
                course3: {
                    title: '产后恢复瑜伽',
                    source: 'https://example.com/videos/course3.mp4',
                    description: '专为产后女性设计的瑜伽动作，帮助恢复身体线条，增强核心力量，改善身体柔韧性。'
                },
                course4: {
                    title: '产后饮食指南',
                    source: 'https://example.com/videos/course4.mp4',
                    description: '介绍产后各阶段的饮食原则和食谱推荐，帮助新妈妈合理安排饮食，促进身体恢复。'
                },
                course5: {
                    title: '哺乳期注意事项',
                    source: 'https://example.com/videos/course5.mp4',
                    description: '详细讲解哺乳期的各种注意事项，包括正确的哺乳姿势、乳房护理和常见问题解决方法。'
                },
                course6: {
                    title: '婴儿抚触按摩',
                    source: 'https://example.com/videos/course6.mp4',
                    description: '教授安全有效的婴儿抚触按摩技巧，促进宝宝身体发育，增进亲子互动。'
                },
                course7: {
                    title: '产后家庭关系调整',
                    source: 'https://example.com/videos/course7.mp4',
                    description: '帮助新父母处理产后家庭关系变化，维护良好的夫妻关系，建立健康的家庭氛围。'
                }
            };
            
            // 设置视频信息
            title.textContent = videos[videoId].title;
            // 在实际项目中，这里应该设置真实的视频源
            // player.src = videos[videoId].source;
            description.textContent = videos[videoId].description;
            
            // 显示弹窗
            modal.classList.remove('hidden');
        }
        
        // 关闭视频弹窗
        document.getElementById('close-video').addEventListener('click', function() {
            const modal = document.getElementById('video-modal');
            const player = document.getElementById('video-player');
            
            player.pause();
            modal.classList.add('hidden');
        });
        
        // 食谱按钮点击
        document.querySelectorAll('.recipe-btn').forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                const recipeId = this.getAttribute('data-recipe');
                showRecipeDetail(recipeId);
            });
        });
        
        function showRecipeDetail(recipeId) {
            const modal = document.getElementById('recipe-modal');
            const title = document.getElementById('recipe-title');
            const content = document.getElementById('recipe-content');
            
            // 食谱数据
            const recipes = {
                recipe1: {
                    title: '花生红枣猪蹄汤',
                    image: 'https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg',
                    ingredients: [
                        '猪蹄 2个',
                        '花生 100克',
                        '红枣 10颗',
                        '生姜 2片',
                        '盐 适量'
                    ],
                    steps: [
                        '猪蹄洗净，斩件，汆烫去血水',
                        '花生提前浸泡2小时',
                        '红枣洗净去核',
                        '所有材料放入砂锅，加入适量清水',
                        '大火煮沸后转小火炖2小时',
                        '加盐调味即可'
                    ],
                    benefits: '促进乳汁分泌，补充蛋白质和胶原蛋白，滋润皮肤'
                },
                recipe2: {
                    title: '当归鲫鱼汤',
                    image: 'https://ai-public.mastergo.com/ai/img_res/9b562a7d18bc78a17f654cc247600413.jpg',
                    ingredients: [
                        '鲫鱼 1条(约500克)',
                        '当归 15克',
                        '黄酒 10毫升',
                        '姜片 3片',
                        '葱段 适量',
                        '盐 适量'
                    ],
                    steps: [
                        '鲫鱼洗净，去鳞和内脏，切段',
                        '当归用清水冲洗干净',
                        '锅中放入适量清水，放入姜片、葱段、黄酒',
                        '水开后放入鲫鱼和当归',
                        '大火煮沸后转小火煲1小时',
                        '加盐调味即可'
                    ],
                    benefits: '补血养气，促进产后恢复，改善贫血状况，帮助子宫恢复'
                },
                recipe3: {
                    title: '黄芪枸杞子鸡汤',
                    image: 'https://ai-public.mastergo.com/ai/img_res/d8e45bb7640d01d7d8a3a843fbd483c3.jpg',
                    ingredients: [
                        '母鸡 半只',
                        '黄芪 20克',
                        '枸杞子 20克',
                        '大枣 5枚',
                        '姜片 适量',
                        '盐 适量'
                    ],
                    steps: [
                        '母鸡宰杀后洗净，切块',
                        '黄芪、枸杞子洗净',
                        '锅中放入适量清水，加入鸡块焯水',
                        '将鸡块、黄芪、枸杞子、大枣、姜片放入砂锅',
                        '加入适量清水，大火煮开后转小火炖2小时',
                        '加盐调味即可'
                    ],
                    benefits: '增强体质，改善体虚乏力，提高免疫力，促进乳汁分泌'
                }
            };
            
            // 设置食谱内容
            title.textContent = recipes[recipeId].title;
            
            let html = `
                <div class="mb-6">
                    <img src="${recipes[recipeId].image}" class="w-full h-48 object-cover rounded-lg">
                </div>
                <div class="space-y-6">
                    <div>
                        <h4 class="font-medium mb-3">食材</h4>
                        <ul class="grid grid-cols-2 gap-2">
            `;
            
            recipes[recipeId].ingredients.forEach(ingredient => {
                html += `<li class="text-gray-600"><i class="fas fa-check text-primary mr-2"></i>${ingredient}</li>`;
            });
            
            html += `
                        </ul>
                    </div>
                    <div>
                        <h4 class="font-medium mb-3">制作步骤</h4>
                        <ol class="space-y-2">
            `;
            
            recipes[recipeId].steps.forEach((step, index) => {
                html += `<li class="text-gray-600"><span class="inline-block w-6 h-6 bg-primary text-white rounded-full text-center text-sm mr-2">${index + 1}</span>${step}</li>`;
            });
            
            html += `
                        </ol>
                    </div>
                    <div>
                        <h4 class="font-medium mb-2">功效</h4>
                        <p class="text-gray-600">${recipes[recipeId].benefits}</p>
                    </div>
                </div>
            `;
            
            content.innerHTML = html;
            
            // 显示弹窗
            modal.classList.remove('hidden');
        }
        
        // 关闭食谱弹窗
        document.getElementById('close-recipe').addEventListener('click', function() {
            document.getElementById('recipe-modal').classList.add('hidden');
        });
    </script>
</body>
</html>